import { StyleSheet, Text, View, TextInput, Button,TouchableOpacity } from "react-native";
import React from "react";
import { useState, useEffect } from "react";
import axiosApi from "../Api/axios";
import { useRouter } from "expo-router";
const back = () => {
  const router = useRouter();
  const [seconds, setSeconds] = useState(60); // 倒计时的秒数
  const [isCounting, setIsCounting] = useState(false); // 是否正在倒计时
  const [verificationCode, setVerificationCode] = useState(""); // 输入框内容
  const [isCodeCorrect, setIsCodeCorrect] = useState(''); // 验证码是否正确
  const [password, setPassword] = useState(""); // 输入框内容
  const [phone, setPhone] = useState(""); // 输入框内容
  const yanzhengma = () => {
    axiosApi
      .post("/llp/get_sms", {
        phone:phone,
      })
      .then((res: any) => {
        console.log(res.data);
        setIsCodeCorrect(res.data.sms);
      });
    
  };
    // 倒计时逻辑
    useEffect(() => {
      let timer: any;
      if (isCounting && seconds > 0) {
        timer = setInterval(() => {
          setSeconds((prev) => prev - 1); // 每秒减少1
        }, 1000);
      } else if (seconds === 0) {
        setIsCounting(false); // 倒计时结束
      }
  
      // 清理定时器
      return () => clearInterval(timer);
    }, [isCounting, seconds]);
    const sendsumbit = () => {
      if (verificationCode === isCodeCorrect) {
        axiosApi.post('/llp/reset_password', { phone: phone, }).then(
          (res: any) => {
            console.log(res.data);
            if (res.data.code === 200) {
              router.push('/lllpLogin/explore')
            } 
          }
        )
      } else {
        console.log("验证码错误"); 
      }
    }
    const handlePress = () => {
      if (!isCounting) {
        setSeconds(60); // 重新设置为60秒
        setIsCounting(true); // 开始倒计时
        yanzhengma()
      }
    };
  return (
    <View>
      <View style={styles.content}>
        <View style={styles.input}>
          <TextInput
            style={{
              width: "100%",
              height: 40,
              borderBottomWidth: 1,
              borderBottomColor: "#ccc",
              borderRightWidth: 1,
              borderRightColor: "#ccc",
              borderLeftWidth: 1,
              borderLeftColor: "#ccc",
              borderTopWidth: 1,
              borderTopColor: "#ccc",
            }}
            placeholder="请输入手机号"
            placeholderTextColor={"#ccc"}
            onChangeText={(text) => setPhone(text)}
          ></TextInput>
          <View style={styles.line}>
          <TextInput
            style={{
              width: "100%",
                height: 40,
                borderColor: "#ccc",
                borderLeftWidth: 1, 
                borderBottomWidth: 1,
            }}
            placeholder="请输入验证码"
            placeholderTextColor="#aaaaaa"
            value={verificationCode}
            onChangeText={setVerificationCode}
          />
          <TouchableOpacity
            style={{
              backgroundColor: "#007bff",
              paddingVertical: 10,
              paddingHorizontal: 20,
              borderRadius: 5,
            }}
            onPress={handlePress}
            disabled={isCounting} // 禁用按钮，直到倒计时结束
          >
            <Text style={{ color: "#fff" }}>
              {isCounting ? `重新发送(${seconds}s)` : "获取验证码"}
            </Text>
          </TouchableOpacity>
          </View>
          <TextInput
            style={{
              width: "100%",
              height: 40,
              borderBottomWidth: 1,
              borderBottomColor: "#ccc",
              borderRightWidth: 1,
              borderRightColor: "#ccc",
              borderLeftWidth: 1,
              borderLeftColor: "#ccc",
            }}
            placeholder="请设置6-20位密码"
            placeholderTextColor={"#ccc"}
            onChange={(e) => setPassword(e.nativeEvent.text)}
          ></TextInput>
          <TextInput
            style={{
              width: "100%",
              height: 40,
              borderBottomWidth: 1,
              borderBottomColor: "#ccc",
              borderRightWidth: 1,
              borderRightColor: "#ccc",
              borderLeftWidth: 1,
              borderLeftColor: "#ccc",
              marginBottom: 50,
            }}
            placeholder="请再次输入密码"
            placeholderTextColor={"#ccc"}
          ></TextInput>
          <Button title="提交" onPress={
            () => {
              sendsumbit()
            }
          }/>
        </View>
      </View>
    </View>
  );
};

export default back;

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    width: "100%",
    height: 50,
  },
  content: {
    backgroundColor: "#fff",
    width: "100%",
    height: 600,
    borderTopWidth: 1,
    borderTopColor: "#ccc",
  },
  input: {
    marginTop: 50,
    width: "90%",
    height: 300,
    marginLeft: "5%",
  },
  line: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    
    width: "100%",
    height: 40,
  },
});
